<template>
	<el-form-item :label="info.label">
		<el-select size="small" v-model="optionValue">
			<el-option v-for="item in options" :label="item.label" :value="item.value" :placeholder="info.label"></el-option>
		</el-select>
	</el-form-item>
</template>

<script>
	export default {
		props: ['toolInfo', 'reset'],
		data(){
			return {
				info: this.toolInfo,
				// 选中数据
				optionValue: '',
				// 下拉框数据
				options: []
			}
		},
		mounted: function(){
			this.$http.post('/api/report/select', {reportId: this.info.reportId, fieldId: this.info.fieldId}, {emulateJSON: true}).then(response => {
				this.options = response.body;
			}, response => {
				console.log('Ajax can not get the data from the server!!!');
			});
		},
		method: {

		},
		watch: {
			// 监听父组件的toolInfo变量
			'toolInfo': function(value){
				this.info = value;
			},
			// 监听父组件的reset状态
			'reset': function(){
				this.optionValue = '';
			},
			// 向父组件传输endDate数据
			'optionValue': function(value){
				this.$emit('message', this.info.fieldName, 'select', value);
			}
		}
	}
</script>